<template>
  <PlusForm
    ref="formRef"
    v-model="newFormInline"
    :columns="columns"
    :hasFooter="false"
    :row-props="{ gutter: 24 }"
    :rules="formRules"
    label-position="right"
    label-width="120px"
  >
    <template #plus-field-menu_ids>
      <div class="w-full pb-2 bg-bg_color overflow-auto">
        <el-input
          v-model="treeSearchValue"
          :placeholder="t('role.menu_ids')"
          class="mb-1"
          clearable
        >
          <template #suffix>
            <el-icon class="el-input__icon">
              <IconifyIconOffline
                v-show="treeSearchValue.length === 0"
                icon="ri:search-line"
              />
            </el-icon>
          </template>
        </el-input>
        <div class="flex flex-wrap">
          <el-checkbox v-model="isExpandAll">
            {{ isExpandAll ? "折叠" : "展开" }}
          </el-checkbox>
          <el-checkbox v-model="isSelectAll">
            {{ isSelectAll ? "全选" : "全不选" }}
          </el-checkbox>
          <el-checkbox v-model="checkStrictly">{{
            checkStrictly ? "层级关联" : "层级独立"
          }}</el-checkbox>
        </div>
        <el-tree-v2
          ref="treeRoleRef"
          show-checkbox
          :data="newTreeMenuData.treeData"
          :props="treeProps"
          :filter-method="filterMethod"
          :check-strictly="!checkStrictly"
        >
          <template #default="{ node }">
            <component :is="useRenderIcon(node?.data?.icon)" class="m-1" />
            <span>{{ transformI18n(node.label) }}</span>
          </template>
        </el-tree-v2>
      </div>
    </template>
  </PlusForm>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { transformI18n } from "@/plugins/i18n";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    name: "",
    status: 1,
    remark: "",
    menu_ids: [],
    code: ""
  }),
  treeMenuData: () => ({
    treeData: [],
    treeIds: [],
    treeSelected: []
  }),
  columns: () => []
});
const treeProps = {
  value: "id",
  label: "title",
  children: "children"
};
const treeRoleRef = ref();
const treeSearchValue = ref("");
const isExpandAll = ref(false);
const isSelectAll = ref(false);
const checkStrictly = ref(false);
const formRef = ref();
const newFormInline = ref(props.formInline);
const newTreeMenuData = ref(props.treeMenuData);

function getRef() {
  newFormInline.value.menu_ids = treeRoleRef.value.getCheckedKeys() ?? [];
  return formRef.value?.formInstance;
}

watch(isExpandAll, val => {
  val
    ? treeRoleRef.value.setExpandedKeys(newTreeMenuData.value.treeIds)
    : treeRoleRef.value.setExpandedKeys([]);
});
watch(isSelectAll, val => {
  val
    ? treeRoleRef.value.setCheckedKeys(newTreeMenuData.value.treeIds)
    : treeRoleRef.value.setCheckedKeys([]);
});

watch(treeSearchValue, (val: string) => {
  treeRoleRef.value!.filter(val);
});
const filterMethod = (query: string, node) => {
  return transformI18n(node.title)!.includes(query);
};
onMounted(() => {
  setTimeout(() => {
    treeRoleRef.value.setCheckedKeys(newTreeMenuData.value.treeSelected);
  }, 0);
});
defineExpose({ getRef });
</script>
